<template>
   <div class="filter">
      <div>
         <ul>
            <li v-for="(item, index) in list" :key="item.id">
               <div @click="_selector(item, index)">
                  <router-link to="" :class="{'activeClass':activeClass===index}">
                     {{item.name}}
                  </router-link>
               </div>
            </li>
         </ul>
      </div>
   </div>
</template>

<script>
   import {mapActions, mapGetters} from 'vuex'
   export default {
      name: 'CommodityFiltration',
      data() {
         return {
            list: [
               {
                  id: 1,
                  name: '推荐',
                  field: 'recommend'
               },
               {
                  id: 2,
                  name: '新品',
                  field: 'newProduct',
                  value: 'new'
               },
               {
                  id: 3,
                  name: '价格',
                  field: 'price',
                  value: 1
               }
            ],
            activeClass: 0,
            obj: {}
         }
      },
      computed: {
         ...mapGetters([
            'geturl'
         ])
      },
      methods: {
         _selector(item, index) {
            this.activeClass = index
             if (item.field === 'recommend') {
                this.obj = {}
                console.log('fdshfjhksdhfksdhf')
             } else {
                this.obj = {}
                this.obj[item.field] = item.value
             }
            this._getData({obj: this.obj})
         },
         _getData({obj}) {
            this.$emit('selector')
            this.RequestData({
               url: this.geturl,
               parameter: obj,
               isfilter: true
            })
         },
         ...mapActions({
            RequestData: 'setData'
         })
      }
   }
</script>

<style scoped lang="stylus">
   .filter
      width 100%
      margin-top 35px
      margin-bottom 20px
      ul
         display flex
         li
            height 20px
            margin-right 15px
            width 50px
            a
               color #333
               font-size 14px
         .activeClass
            color aqua
</style>
